<template>
    <div id="add">
        <div class="edit">
            <ul>
                <li>
                    <span>姓名</span>
                    <input type="text" name="" id="" placeholder="必填，最多输入25个汉字" v-model="from.user_name">
                </li>
                <li>
                    <span>手机号</span>
                    <input type="text" name="" id="" placeholder="请输入手机号" v-model="from.mobile">
                </li>
                <li>
                    <span>地址信息</span>
                    <input type="text" name="" id="" placeholder="请选择省/市/区/街道" v-model="ressdi" @focus="flag=true">
                </li>
                <li>
                    <span>详细地址</span>
                    <textarea v-model="from.address" name="" id="" style="resize: none;" placeholder="请输入详细地址，如道路、门牌号、校区、楼栋数、单元等"></textarea>
                </li>
            </ul>
        </div>
        <div class="yes">
            <van-cell-group>
                <van-cell title="设为默认地址">
                    <van-switch v-model="defaults" active-color="rgb(47, 193, 154)" @change="changeCheckout" />
                </van-cell>
            </van-cell-group>
        </div>
        <div class="no yes" v-if="this.id">
            <van-cell-group>
                <van-cell title="删除收货地址" @click="del">
                </van-cell>
            </van-cell-group>
        </div>
        <div class="but">
            <button @click="add">添加地址</button>
        </div>
        <van-popup v-model="flag" position="bottom">
            <van-area v-show="addressflag" title="选择地址" :area-list="areaList" @cancel="flag=false" @confirm="addres" :value="from.district_id + ''" />
        </van-popup>
    </div>
</template>
<script>
import { areaList } from '@vant/area-data'
import { jiares, changecheck, editres, editaddres, delress } from '@/api/user.js'
export default {
  data() {
    return {
      from: {
        address: '',
        city_id: '',
        district_id: '',
        is_default: 2,
        mobile: '',
        province_id: '',
        user_name: ''
      },
      addressflag: true,
      flag: false,
      ressdi: '',
      areaList,
      id: this.$route.query.id || '',
      defaults: false
    }
  },
  methods: {
    async changeCheckout() {
      if (this.id) {
        let data = await changecheck(this.id)
        console.log(data)
      }
    },
    async del() {
      let data = await delress(this.id)
      console.log(data)
      this.$router.go(-1)
    },
    addres(val) {
      console.log(val)
      this.flag = false
      this.ressdi = ''
      val.forEach(item => [(this.ressdi += item.name + '/')])
      this.from.province_id = val[0].code
      this.from.city_id = val[1].code
      this.from.district_id = val[2].code
    },
    async add() {
      if (this.id) {
        let { data: data } = await editres({ ...this.from, is_default: this.defaults ? 1 : 2, id: this.id })
        console.log(data, 7)
      } else {
        let { data: data } = await jiares({ ...this.from, is_default: this.defaults ? 1 : 2 })
        if (data.code != 200) {
          this.$toast(data.msg)
        }
      }
      this.$router.go(-1)
    }
  },
  async created() {
    if (this.id) {
      let { data: data } = await editaddres(+this.id)
      console.log(data)
      for (let i in this.from) {
        this.from[i] = data.data[i]
      }
      this.ressdi = data.data.province_name + data.data.city_name + data.data.district_name
      this.defaults = data.data.is_default == 1 ? true : false
    }
  }
}
</script>
<style lang="scss" scoped>
#add {
  height: 100%;
}
.but {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px 0px #ccc;

  button {
    background: #e60012;
    border: none;
    width: 90%;
    height: 35px;
    border-radius: 25px;
    color: white;
    font-size: 14px;
  }
}
.edit {
  padding: 15px;
  background: white;
  ul {
    li {
      margin: 10px 0;
      padding: 5px 0;
      display: flex;
      flex-direction: column;
      span {
        margin-bottom: 10px;
        font-size: 14px;
      }
      textarea {
        height: 60px;
        background: #fdfdfd;
        border: 1px solid #e8e8e8;
        padding: 15px 5px;
        box-sizing: border-box;
        font-size: 14px;
        color: #595959;
      }
      input {
        height: 40px;
        background: #fdfdfd;
        border: 1px solid #e8e8e8;
        border-radius: 2px;
        padding-left: 15px;
        font-size: 14px;
        color: #595959;
      }
      input::-webkit-input-placeholder {
        color: #ccc;
        font-size: 14px;
      }
      textarea::-webkit-input-placeholder {
        color: #ccc;
        font-size: 14px;
      }
    }
  }
}
.yes {
  margin-top: 15px;
  .van-cell__title {
    font-size: 16px;
    color: #595959;
  }
  .van-switch {
    width: 50px;
    height: 30px;
  }
  .van-cell__title {
    display: flex;
    align-items: center;
    font-size: 16px;
  }
}
.no {
  .van-cell__title {
    color: red;
    font-size: 16px;
  }
}
</style>
